import React,{useState} from 'react'
import {Toast,Button} from 'antd-mobile'
import Header from "../../components/Header/Header";
import { reqregister } from "../../http/api";

 const Register=(props)=> {


  //初始化表单数据
  const [user,setUser] = useState({
    phone:'',
    nickname:'',
    password:'',
  })
  //注册
  const doRegister = ()=>{
    //发请求
    reqregister(user).then((res)=>{
      if(res.data.code==200){
        //弹成功
        Toast.show({
          content:res.data.msg
        })
        //跳页面
        props.history.push('/login')
      }
    })
  }
  return (
    <div>
    <Header back title="注册"></Header>
    {/* 2.数据绑定 */}
    <div>user:{JSON.stringify(user)}</div>
    <div>
      手机号：
      <input
        type="text"
        value={user.phone}
        onChange={(e) => setUser({ ...user, phone: e.target.value })}
      />
    </div>
    <div>
      昵称：
      <input
        type="text"
        value={user.nickname}
        onChange={(e) => setUser({ ...user, nickname: e.target.value })}
      />
    </div>
    <div>
      密码：
      <input
        type="text"
        value={user.password}
        onChange={(e) => setUser({ ...user, password: e.target.value })}
      />
    </div>
    <Button block size='large' color='primary'  onClick={() => doRegister()}>注册</Button>
  </div>
  )
}
export default Register;